<template>
  <div>
    <el-cascader :options="dataSource" v-model="currentValue" clearable></el-cascader>
    <el-input v-model="finalValue" style="display: none"/>
  </div>
</template>
<script>
import axios from 'axios';
import Qs from 'qs';
import Vue from 'vue';

export default {
  name: 'cascaderplusinput',
  components: {},
  props: {
    value: {
      type: String,
      default() {
        return "";
      }
    },
    url: { /*数据源链接*/
      type: String,
      default() {
        return "";
      }
    }
  },
  watch: {
    currentValue() {
      let value = this.currentValue;
      if (value.length > 0) {
        value = value[value.length - 1];
      }
      this.$emit('input', value);
    },
    value: {
      handler: function (val, oldval) {
        this.finalValue = val;
      },
      deep: true,
      immediate: true
    },
    oldValue: {
      handler: function (val, oldval) {
        this.oldValue = val;
        //this.loadData();
        //this.loadDataAll();
      },
      immediate: true
    },
  },
  data() {
    return {
      finalValue: "",
      currentValue: [],
      dataSource: []
    }
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      //this.loadData();
      this.loadDataAll();
    });
  },
  beforeDestroy() {

  },
  methods: {
    loadDataAll(item) {
      let parentId = (!item || item.value === undefined) ? 0 : item.value;
      Vue.axios.get(this.url, {
        params: {parent_id: parentId}
      }).then(response => {
        let res = response.data;
        this.dataSource = res.data;
      })
          .catch(err => {
            console.log(" handleSearch err %s", err);
            this.dataSource = [];
          })
    },
    loadData(item, callback) {
      /*如果没有item，则默认parentId为0*/
      let parentId = (!item || item.value === undefined) ? 0 : item.value;
      if (item) {
        item.loading = true;
      }

      Vue.axios.get(this.url, {
        params: {parent_id: parentId}
      })
          .then(response => {
            let res = response.data;

            if (!item) {
              this.dataSource = res.data.map((it) => {
                let json = {
                  value: it.value,
                  label: it.label
                }

                if (!it.leaf) {
                  json.children = [];
                  json.loading = false;
                }
                return json;
              })
              return;
            }

            item.loading = false;
            item.children = res.data.map((it) => {
              let json = {
                value: it.value,
                label: it.label
              }

              if (!it.leaf) {
                json.children = [];
                json.loading = false;
              }
              return json;
            })

            if (typeof callback == 'function') {
              callback();
            }
          })
          .catch(err => {
            console.log(" handleSearch err %s", err);
            this.options = [];
          })
    },
    formatDisplay(labels, selectedData) {
      const index = labels.length - 1;
      if (index !== -1) {
        return labels[index];
      }

      return this.finalValue;
    }
  }
}
</script>
<style>
</style>